import React, { useEffect, useState, useRef } from 'react';
import styles from './index.css';
import {  List, WindowScroller } from 'react-virtualized';
// import 'react-virtualized/styles.css'; // only needs to be imported once
import collectRes from './data.json';
import { Checkbox, Divider, Button } from 'antd';
const CheckboxGroup = Checkbox.Group;

console.log('collectRes', collectRes);

export default function() {
  const [tranList, setTranList] = useState([]); // 交易列表
  const [checkAll, setCheckAll] = useState(false); // 全选所有场次是否勾选

  const alleventIndex = useRef([]);  // 所有场次索引，场次点击展开后动态变化的，实时更新所有场次的索引

  useEffect(() => {
    const queryResTran = collectRes.data.queryResTransactionResponseList;
   
    // 初始化场次索引
    alleventIndex.current = queryResTran.map((_, index) => {
      return index;
    });

    // 记录场次的原始索引
    queryResTran.forEach((ele, index) => {
      ele.originIndex = index;
    });

    setTranList(queryResTran);
  }, []);

  // 场次点击
  function onchange(index) {
    console.log('index', index);
    const children = tranList[index].children; // 场次下的票
    const originIndex = tranList[index].originIndex; // 场次原始索引
    const checked = tranList[index].checked; // 场次是否选中

    // open 代表场次是否展开
    if (!tranList[index]?.open) {
      tranList[index].open = true;

      // 更新场次索引
      alleventIndex.current = alleventIndex.current.map((item, i) => {
        if (i > originIndex) {
          return item + children.length;
        }
        return item;
      });

       // 如果场次 选中了，下面的票全部选中
      children.forEach(item => {
        item.checked = !!checked;
      });
     
      // 展开后 需要把票 更新到tranList中
      setTranList(data => {
        data.splice(index + 1, 0, ...children);
        return [...data];
      });
    } else {
         // 场次收起，根据open判断
      tranList[index].open = false;
 // 更新场次索引
      alleventIndex.current = alleventIndex.current.map((item, i) => {
        if (i > originIndex) {
          return item - children.length;
        }
        return item;
      });
     // 场次收起， 需要把票在tranList移除
      setTranList(data => {
        data.splice(index + 1, tranList[index].children.length);
        return [...data];
      });
    }
    console.log('alleventIndex.current', alleventIndex.current);
  }

  // 所有全选
  function onCheckAllChange(e) {
    console.time('所有全选时间')

    // 把所有场次全部选中
    alleventIndex.current.forEach(item => {
      tranList[item].checked = e.target.checked;
      const open = tranList[item].open;
      if (open) {
        tranList[item].children.forEach(ele => {
          ele.checked = e.target.checked;
        });
      }
    });

    // 更新列表
    setTranList([...tranList]);
    setCheckAll(e.target.checked);
    console.timeEnd('所有全选时间')
  }


  //  某个场次全选
  function onCheckEventChange(index, e) {
    console.log(e, index);
    const children = tranList[index].children;
    const checked = e.target.checked;

    // 如果场次有个没选中，就把全选置灰
    if (!checked) setCheckAll(false);
    else {
        // 如果场次全选中，就把全选勾选
      const flag = alleventIndex.current.every((value, i) => {
        if (index !== value) {
          return tranList[value].checked;
        }
        return checked;
      });
      setCheckAll(flag);
    }

    //  根据场次是否选中来更新票是否选中
    children.forEach(item => {
      item.checked = checked;
    });

    setTranList(data => {
      data[index].checked = checked;
      return [...data];
    });
  }

  // 单选
  function onCheckradioChange(index, e) {
    const checked = e.target.checked;
    // 找到场次索引
   const  perIndex=alleventIndex.current.findIndex((item)=>index<item)
   
    setTranList(data => {
      data[index].checked = checked;
    // 如果场次有个没选中，就把场次全选置灰
    const eventIndex = alleventIndex.current[perIndex-1]
    const children = tranList[eventIndex].children;
    if (!checked) {
      data[eventIndex].checked = false;
    }else {
      const flag =children.some(item=>!item.checked)
      if(!flag)  data[eventIndex].checked = true;
    }
      return [...data];
    });
  }

  function onSort (){
    console.log('tranList',tranList)
  }
  function rowRenderer({ key, index, style }) {
    return (
      <>
        {Array.isArray(tranList[index].children) ? (
          <div key={key} style={{ ...style, background: 'red' }}>
            <span onClick={onchange.bind(null, index)}> {tranList[index].performanceNameEn}</span>
            <Checkbox
              onChange={onCheckEventChange.bind(null, index)}
              checked={!!tranList[index].checked}
            />
          </div>
        ) : (
          <div key={key} style={style}>
          <span> {tranList[index].performanceNameEn}</span>
            <Checkbox  onClick={onCheckradioChange.bind(null, index)} checked={!!tranList[index].checked} />
          </div>
        )}
      </>
    );
  }
  return (
    <WindowScroller>
      {({ height, isScrolling, registerChild, scrollTop, width }) => (
        <div>
          <header style={{ height: '200px' }}>
            Table header
            <Button onClick={onSort}>排序</Button>
            <Checkbox onChange={onCheckAllChange} checked={checkAll}>
              Check all
            </Checkbox>
          </header>
          <div ref={registerChild}>
            <List
              autoHeight
              height={height}
              isScrolling={isScrolling}
              scrollTop={scrollTop}
              rowCount={tranList.length}
              rowHeight={50}
              rowRenderer={rowRenderer}
              width={width}
            />
          </div>
        </div>
      )}
    </WindowScroller>
  );
}
